<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <title>表单控件</title>
  </head>
  <body>
    <h3>请选择你最喜欢的运动</h3>
    <!-- .form-check用于创建垂直排布的复选框或者单选框  -->
    <!-- 如果要创建水平排布的就使用表单组,并在表单组的div上添加.form-check-inline -->
    <div class="form-group form-check-inline">
      <div class=" form-check">
        <!-- form-check-label用于调整label之间的边距 -->
        <label class="form-check-label">
          <!-- form-check-input可以让复选框或单选框具有bootrap的样式 -->
          <input type="checkbox" class="form-check-input" name="sport" />篮球
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input" name="sport" />足球
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input" name="sport" />游泳
        </label>
      </div>
    </div>
    <h3>请选择你的性别</h3>
    <div class="form-group">
        <div class="form-check">
            <label class="form-check-label">
                <!-- 单选框要形成一组,也就是多个单选框只能选中其中一个,需要给这些input加上相同的name属性 -->
                <input type="radio" class="form-check-input" name="gender" />男
              </label>
        </div>
        <div class="form-check">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="gender" />女
              </label>
        </div>
    </div>
    <h3>请选择日期</h3>
    <!-- .custom-select用于创建bootstrap样式的选择框,添加multiple属性可以让选择框可以同时选中多个选项 -->
    <select class="custom-select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
  </body>
</html>
